<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pagination</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>

</head>
<body>


    <div id="app">
        <template>
            <div class="block">
                <span class="demonstration">显示总数</span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage1"
                        :page-size="100"
                        layout="total, prev, pager, next"
                        :total="1000">
                </el-pagination>
            </div>
            <div class="block">
                <span class="demonstration">调整每页显示条数</span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage2"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="sizes, prev, pager, next"
                        :total="1000">
                </el-pagination>
            </div>
            <div class="block">
                <span class="demonstration">直接前往</span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="1000">
                </el-pagination>
            </div>
            <div class="block">
                <span class="demonstration">完整功能</span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[100, 200, 300, 400]"
                        :page-size="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="400">
                </el-pagination>
            </div>
        </template>
    </div>

    <script>
        new Vue({
            el:"#app",
            methods: {
                handleSizeChange(val) {
                    console.log("每页 ${val} 条");
                },
                handleCurrentChange(val) {
                    console.log("当前页: ${val}");
                }
            },
            data() {
                return {
                    currentPage1: 5,
                    currentPage2: 5,
                    currentPage3: 5,
                    currentPage4: 4
                };
            }
        })
    </script>
</body>
</html>